<template>
  <div class="login-container">
    <div class="login-box">
      <h2>管理员登录</h2>
      <div class="form-group">
        <label for="username">用户名</label>
        <input 
          type="text" 
          id="username" 
          v-model="username" 
          placeholder="请输入用户名"
        >
      </div>
      <div class="form-group">
        <label for="password">密码</label>
        <input 
          type="password" 
          id="password" 
          v-model="password" 
          placeholder="请输入密码"
        >
      </div>
      <div class="form-group verify-group">
        <label for="verifyCode">验证码</label>
        <div class="verify-input-group">
          <input 
            type="text" 
            id="verifyCode" 
            v-model="inputCode" 
            placeholder="请输入验证码"
          >
          <VerifyCode ref="verifyCodeRef" />
        </div>
      </div>
      <div class="form-group">
        <button @click="handleLogin" class="login-btn">登录</button>
      </div>
      <div class="form-group">
        <router-link to="/register" class="register-link">没有账号？去注册</router-link>
      </div>
      <div v-if="errorMsg" class="error-message">{{ errorMsg }}</div>
    </div>
  </div>
</template>

<script setup>
import api from '../services/api';
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import VerifyCode from '../components/VerifyCode.vue';
import { useAuthStore } from '../stores/auth';

const router = useRouter();
const authStore = useAuthStore();

const username = ref('');
const password = ref('');
const inputCode = ref('');
const errorMsg = ref('');
const verifyCodeRef = ref(null);

const handleLogin = async () => {
  try {
    // 验证表单
    if (!username.value || !password.value || !inputCode.value) {
      errorMsg.value = '请填写完整信息';
      return;
    }
    
    // 调用登录API
    const response = await api.post('/auth/login', {
      username: username.value,
      password: password.value,
      verifyCode: inputCode.value,
      sessionId: localStorage.getItem('verifySessionId')
    });
    
    // 保存token并登录
    await authStore.login(response.data.token);
    router.push('/dashboard');
  } catch (error) {
    console.error('登录错误:', error);
    errorMsg.value = error.response?.data?.message || '登录失败，请重试';
    if (verifyCodeRef.value) {
      verifyCodeRef.value.refreshCode();
    }
  }
};
</script>

<style scoped>
.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100vw;
  background: linear-gradient(135deg, #f6d365 0%, #fda085 100%, #a1c4fd 100%, #c2e9fb 100%);
}
.login-box {
  width: 540px;
  max-width: 98vw;
  min-width: 380px;
  padding: 56px 48px 40px 48px;
  background: rgba(255,255,255,0.95);
  border-radius: 28px;
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.18);
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 2px solid #fda085;
}
h2 {
  font-size: 32px;
  font-weight: bold;
  color: #ff6f91;
  margin-bottom: 32px;
  letter-spacing: 2px;
}
.form-group label {
  color: #7f53ac;
  font-size: 18px;
  font-weight: 500;
}
input {
  font-size: 22px;
  padding: 18px 20px;
  border-radius: 12px;
  border: 2px solid #a1c4fd;
  background: linear-gradient(90deg, #fbc2eb 0%, #a6c1ee 100%);
  margin-bottom: 8px;
  outline: none;
  transition: border 0.3s;
}
input:focus {
  border: 2px solid #ff6f91;
}
.login-btn {
  font-size: 22px;
  padding: 18px 0;
  border-radius: 16px;
  background: linear-gradient(90deg, #f6d365 0%, #fda085 100%);
  color: #fff;
  font-weight: bold;
  border: none;
  margin-top: 12px;
  box-shadow: 0 4px 16px 0 rgba(253,160,133,0.18);
  cursor: pointer;
  transition: background 0.3s;
}
.login-btn:hover {
  background: linear-gradient(90deg, #a1c4fd 0%, #c2e9fb 100%);
  color: #ff6f91;
}
.error-message {
  color: #ff6f91;
  text-align: center;
  margin-top: 10px;
  font-size: 16px;
}
.verify-input-group {
  display: flex;
  align-items: center;
  gap: 18px;
}
.login-logo {
  width: 80px;
  height: 80px;
  margin-bottom: 18px;
}
</style>